<template>
  <view class="assist">
    <scroll-view scroll-x='true' class='story-scroll'>
      <block v-if="shortcut.length < 8">
        <view class="odd">
          <block v-for="(item, index ) in shortcut" :key="index" v-if="index<4">
            <navigator hover-class="none" class="a" :url="item.world==1?'/home/index/external?url='+item.url:item.url">
              <image :src="item.images" mode="aspectFill" class="img"></image>
              <view class="title">{{item.brand_name}}</view>
            </navigator>
          </block>
        </view>
        <view class="even">
          <block v-for="(item, index ) in shortcut" :key="index" v-if="index>=4">
            <navigator hover-class="none" class="a" :url="item.world==1?'/home/index/external?url='+item.url:item.url">
              <image :src="item.images" mode="aspectFill" class="img"></image>
              <view class="title">{{item.brand_name}}</view>
            </navigator>
          </block>
        </view>
      </block>
      <block v-else>
        <view class="odd">
          <block v-for="(item, index ) in shortcut" :key="index" v-if="index%8 < 4">
            <navigator hover-class="none" class="a" :url="item.world==1?'/home/index/external?url='+item.url:item.url">
              <image :src="item.images" mode="aspectFill" class="img"></image>
              <view class="title">{{item.brand_name}}</view>
            </navigator>
          </block>
        </view>
        <view class="even">
          <block v-for="(item, index ) in shortcut" :key="index" v-if="index%8 >= 4">
            <navigator hover-class="none" class="a" :url="item.world==1?'/home/index/external?url='+item.url:item.url">
              <image :src="item.images" mode="aspectFill" class="img"></image>
              <view class="title">{{item.brand_name}}</view>
            </navigator>
          </block>
        </view>
      </block>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    props: {
      shortcut: Array,
    },
    methods: {}
  }
</script>

<style scoped>
  .assist {
    width: 100%;
    display: inline-block;
    background-color: #fff;
    margin-top: 20rpx;
    border-radius: 16rpx;
  }

  .assist .odd,
  .assist .even {
    width: 100%;
    white-space: nowrap;
    padding-top: 20rpx;
    display: -webkit-box;
  }

  .assist .a {
    width: 25%;
    text-align: center;
    /* display: inline-block; */
  }

  .assist .a .img {
    width: 97rpx;
    height: 97rpx;
  }

  .assist .a .title {
    font-size: 28rpx;
    color: #333;
  }

  .story-scroll {
    padding-bottom: 49rpx;
    border-bottom: 10rpx solid #f8f8f8;
  }
</style>
